<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	<title>Ejemplo</title>

	<!-- Se cargaran los archivos desde las carpeta de atras. -->
	<link rel="stylesheet" type="text/css" href="../ejemplos.css"/>
	<script type="text/javascript" src="../../../js/lib.js"></script>
	<script type="text/javascript" src="../../../js/ajax.js"></script>
	<script type="text/javascript" src="../../../js/asyncform.js"></script>
</head>

<body>

	<h1>Ejemplo #4</h1>

	<p>Este ejemplo muestra el uso del archivo de utilidades "utils.php" para poder enviar datos de manera mas
	facil y tambien validar de manera mucho mas sencilla. Tambien muestra el uso de la clase AsyncForm para crear
	un formulario que utilize ajax (como en el ejemplo anterior) pero de manera mucho mas sencilla.
	</p>

	<div class="code">
		<div>
			<b>Código para iniciar el formulario:</b>

			<pre>
var frmInicioSesion = new AsyncForm ($("#el_formulario"));

frmInicioSesion.onFormSubmitted = function ()
{
	alert('Todo salio super bien!!');
}
			</pre>
		</div>

		<div>
			<b>Código del archivo <em>multiplicar.php</em>:</b>

			<pre>
&lt;?php

	require_once('../../../code/utils.php');

	$datos = validar ($_REQUEST, array
	(
		'usuario' => array(
			'obligatorio' => array(true, 'Por favor escriba su nombre de usuario.'),
			'min_longitud' => array(5, 'Debe tener al menos cinco (5) carácteres.')
		),

		'clave' => array(
			'obligatorio' => array(true, 'Por favor escriba su contraseña.'),
			'min_longitud' => array(8, 'Debe tener al menos ocho (8) carácteres.')
		)
	));

	reterr(E_ERROR_PROC, 'Todo bien!!!!!!');

?&gt;
			</pre>
		</div>
	</div>

	<div class="result">
		<b>Resultado:</b>

		<div>
			<form id="el_formulario" action="login.php">
				<label>Nombre de usuario:</label>
				<input type="text" name="usuario"/>
				<br/>

				<label>Clave:</label>
				<input type="text" name="clave"/>
				<br/>

				<br/>
				<hr/>
				<input type="submit" value="Iniciar Sesion"/>
				<span class="loading-indicator">Cargando ...</span>
				<br/>

				<div class="message error"></div>
			</form>
		</div>
	</div>

	<script>

		var frmInicioSesion = new AsyncForm ($("#el_formulario"));

		frmInicioSesion.onFormSubmitted = function ()
		{
			alert('Todo salio super bien!!');
		}

	</script>

</body>

</html>

